// 非湖北地区累计确诊 TOP5
(function() {
  var myChart = echarts.init(document.querySelector('.bar .chart'));
  var province = [];
  var confirm = [];
  var option = {
          color: ['#2f89cf','#2384CF','#3291DB','#23679B','#3399CC'],
          tooltip: {
              trigger: 'axis',
              axisPointer: {            
                  type: 'shadow'       
              }
          },
          grid: {
              left: '0%',
              top: '10px',
              right: '0%',
              bottom: '4%',
              containLabel: true
          },
          xAxis: [
              {
                  type: "category",
                  data: province,
                  axisTick: {
                    alignWithLabel: true
                  },
                  axisLabel: {
                    color: "rgba(255,255,255,.6) ",
                    fontSize: "12"
                  },
                  axisLine: {
                    show: false
                  }
                }
          ],
          yAxis: [
              {
                  axisLabel: {
                      color: "rgba(255,255,255,.6) ",
                      fontSize: "12"
                    },
                  type: 'value'
              }
          ],
          series: [
              {
                  name: '累计确诊',
                  type: 'bar',
                  barWidth: '60%',
                  data: confirm
              }
          ]
      };
      $.get('http://localhost:8080/getPie').done(function (data) {
              $.each(data, function (k, v) {
                  province.push(v.province);
                  confirm.push(v.confirm);
              });
      
      myChart.setOption({
          xAxis: [{
              data: province
          }],
          series: [{
              data: confirm
          }]
      });
  })
  myChart.setOption(option);
  window.addEventListener("resize", function() {
      myChart.resize();
    });
})();

// 当前确诊人数
(function(){
  var myChart = echarts.init(document.querySelector('.rose .chart'));
  var nowcon = [];
  var option = {
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
              bottom: "0%",
              itemWidth: 10,
              itemHeigh: 10,
              textStyle: {
                  color: "rgba(255,255,255,.5)",
                  fontSize: "12"
              },
              data: []
          },
          series: [
              {
                  name: '当前确诊',
                  type: 'pie',
                  radius: ["10%", "70%"],
                  center: ["50%", "50%"],
                  roseType: 'radius',
                  lable: {
                      fontSize: 10
                  },
                  lableLine: {
                      length: 6,
                      length2: 8
                  },
                  data: []
              }
          ]
      };
      $.get('http://localhost:8080/getRose').done(function(data){
          $.each(data, function (k, v){
              var nowconfirm = {value: v.nowconfirm, name: v.province};
              nowcon.push(nowconfirm);
          });
          //console.log(nowcon);
          myChart.setOption({
              legend: {
                  data: nowcon.name
              },
              series: {
                  name: "当前确诊",
                  type: "pie",
                  data: nowcon
              }
          });
      });
      
  
  myChart.setOption(option);
  window.addEventListener("resize", function() {
      myChart.resize();
    });
})();

// 非湖北地区累计死亡 TOP5
(function(){
  var myChart = echarts.init(document.querySelector('.pie .chart'));
  var dead = [];
  var option = {
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          visualMap: {
              show: false,
              min: 0,
              max: 50,
              inRange: {
                  colorLightness: [0, 1]
              }
          },
          series: [
              {
                  name: '累计死亡',
                  type: 'pie',
                  radius: '80%',
                  center: ['50%', '45%'],
                  data: dead.sort(function (a, b) { return a.value - b.value; }),
                  roseType: 'radius',
                  label: {
                      color: "rgba(255,255,255,0.6) "
                  },
                  labelLine: {
                      lineStyle: {
                          color: 'rgba(255, 255, 255, 0.6)'
                      },
                      smooth: 0.2,
                      length: 10,
                      length2: 20
                  },
                  itemStyle: {
                      color: '#C23531',
                      shadowBlur: 200,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  },
                  
                  animationType: 'scale',
                  animationEasing: 'elasticOut',
                  animationDelay: function (idx) {
                      return Math.random() * 200;
                  }
              }
          ]
      };
      $.get('http://localhost:8080/getDead').done(function(data){
          $.each(data, function(k, v){
              var deaddata = {value: v.dead, name: v.province};
              dead.push(deaddata);
          });
          //console.log(dead);
          myChart.setOption({
              series: {
                  name: '累计死亡',
                  type: 'pie',
                  data: dead.sort(function (a, b) { return a.value - b.value; })
              }
          });
      }); 
      myChart.setOption(option);
      window.addEventListener("resize", function() {
          myChart.resize();
        });
})();

// 非湖北地区累计治愈
(function(){
  var myChart = echarts.init(document.querySelector('.heal .chart'));

  var option = {
    tooltip: {
        trigger: 'item',
        formatter: "{b}"
    },
    series: [{
        type: 'treemap',
        width: '100%',
        height: '85%',
        top: '15%',
        roam: true, //是否开启拖拽漫游（移动和缩放）
        nodeClick: false, //点击节点后的行为,false无反应
        breadcrumb: {
            show: false
        },
        label: { //描述了每个矩形中，文本标签的样式。
            normal: {
                show: true,
                position: ['10%', '40%']
            }
        },
        itemStyle: {
            normal: {
                show: true,
                textStyle: {
                    color: '#fff',
                    fontSize: 16,
                },
                borderWidth: 1,
                borderColor: '#fff',
            },

            emphasis: {
                label: {
                    show: true
                }
            }
        },
        data: []
    }]
};
  var heal = [];
  
  $.get('http://localhost:8080/getHeal').done(function(data){
          $.each(data, function(k, v){
              var healdata = {value: v.heal, name: v.province};
              heal.push(healdata);
          });
         // console.log(heal);
         for (var n in heal) {
          heal[n]['name'] = heal[n]['name'] + ' ' + heal[n]['value'] + '人'
      }
          myChart.setOption({
              series: {
                  type: 'treemap',
                  data: heal
              }
          });
      }); 

      myChart.setOption(option);
      window.addEventListener("resize", function() {
      myChart.resize();
      });
})();

// 累计情况
(function(){
  var datac = '';
  var datah = '';
  var datad = '';
  $.get('http://localhost:8080/getSum').done(function(data){
     $.each(data, function (k, v) {
      //console.log(data)
      datac = (v.confirmd);
      datah = (v.heald);
      datad = (v.deadp);
     })
     document.getElementById('c').innerHTML = datac;
     document.getElementById('h').innerHTML = datah;
     document.getElementById('d').innerHTML = datad;
});
})();

// 地图模块显示支援湖北人数
(function() {
  var myChart = echarts.init(document.querySelector(".map .chart"));
  var geoCoordMap = {
    上海: [121.4648, 31.2891],
    东莞: [113.8953, 22.901],
    东营: [118.7073, 37.5513],
    中山: [113.4229, 22.478],
    临汾: [111.4783, 36.1615],
    临沂: [118.3118, 35.2936],
    丹东: [124.541, 40.4242],
    丽水: [119.5642, 28.1854],
    新疆: [87.9236, 43.5883],
    佛山: [112.8955, 23.1097],
    保定: [115.0488, 39.0948],
    甘肃: [103.5901, 36.3043],
    包头: [110.3467, 41.4899],
    北京: [116.4551, 40.2539],
    北海: [109.314, 21.6211],
    江苏: [118.8062, 31.9208],
    广西: [108.479, 23.1152],
    江西: [116.0046, 28.6633],
    南通: [121.1023, 32.1625],
    厦门: [118.1689, 24.6478],
    台州: [121.1353, 28.6688],
    安徽: [117.29, 32.0581],
    内蒙古: [111.4124, 40.4901],
    咸阳: [108.4131, 34.8706],
    黑龙江: [127.9688, 45.368],
    唐山: [118.4766, 39.6826],
    嘉兴: [120.9155, 30.6354],
    大同: [113.7854, 39.8035],
    大连: [122.2229, 39.4409],
    天津: [117.4219, 39.4189],
    山西: [112.3352, 37.9413],
    威海: [121.9482, 37.1393],
    宁波: [121.5967, 29.6466],
    宝鸡: [107.1826, 34.3433],
    宿迁: [118.5535, 33.7775],
    常州: [119.4543, 31.5582],
    广东: [113.5107, 23.2196],
    廊坊: [116.521, 39.0509],
    延安: [109.1052, 36.4252],
    张家口: [115.1477, 40.8527],
    徐州: [117.5208, 34.3268],
    德州: [116.6858, 37.2107],
    惠州: [114.6204, 23.1647],
    四川: [103.9526, 30.7617],
    扬州: [119.4653, 32.8162],
    承德: [117.5757, 41.4075],
    西藏: [91.1865, 30.1465],
    无锡: [120.3442, 31.5527],
    日照: [119.2786, 35.5023],
    云南: [102.9199, 25.4663],
    浙江: [119.5313, 29.8773],
    枣庄: [117.323, 34.8926],
    柳州: [109.3799, 24.9774],
    株洲: [113.5327, 27.0319],
    湖北: [114.3896, 30.6628],
    汕头: [117.1692, 23.3405],
    江门: [112.6318, 22.1484],
    辽宁: [123.1238, 42.1216],
    沧州: [116.8286, 38.2104],
    河源: [114.917, 23.9722],
    泉州: [118.3228, 25.1147],
    泰安: [117.0264, 36.0516],
    泰州: [120.0586, 32.5525],
    山东: [117.1582, 36.8701],
    济宁: [116.8286, 35.3375],
    海南: [110.3893, 19.8516],
    淄博: [118.0371, 36.6064],
    淮安: [118.927, 33.4039],
    深圳: [114.5435, 22.5439],
    清远: [112.9175, 24.3292],
    温州: [120.498, 27.8119],
    渭南: [109.7864, 35.0299],
    湖州: [119.8608, 30.7782],
    湘潭: [112.5439, 27.7075],
    滨州: [117.8174, 37.4963],
    潍坊: [119.0918, 36.524],
    烟台: [120.7397, 37.5128],
    玉溪: [101.9312, 23.8898],
    珠海: [113.7305, 22.1155],
    盐城: [120.2234, 33.5577],
    盘锦: [121.9482, 41.0449],
    河北: [114.4995, 38.1006],
    福建: [119.4543, 25.9222],
    秦皇岛: [119.2126, 40.0232],
    绍兴: [120.564, 29.7565],
    聊城: [115.9167, 36.4032],
    肇庆: [112.1265, 23.5822],
    舟山: [122.2559, 30.2234],
    苏州: [120.6519, 31.3989],
    莱芜: [117.6526, 36.2714],
    菏泽: [115.6201, 35.2057],
    营口: [122.4316, 40.4297],
    葫芦岛: [120.1575, 40.578],
    衡水: [115.8838, 37.7161],
    衢州: [118.6853, 28.8666],
    青海: [101.4038, 36.8207],
    陕西: [109.1162, 34.2004],
    贵州: [106.6992, 26.7682],
    连云港: [119.1248, 34.552],
    邢台: [114.8071, 37.2821],
    邯郸: [114.4775, 36.535],
    河南: [113.4668, 34.6234],
    鄂尔多斯: [108.9734, 39.2487],
    重庆: [107.7539, 30.1904],
    金华: [120.0037, 29.1028],
    铜川: [109.0393, 35.1947],
    宁夏: [106.3586, 38.1775],
    镇江: [119.4763, 31.9702],
    吉林: [125.8154, 44.2584],
    湖南: [113.0823, 28.2568],
    长治: [112.8625, 36.4746],
    阳泉: [113.4778, 38.0951],
    青岛: [120.4651, 36.3373],
    韶关: [113.7964, 24.7028]
  };

  var XAData = [
    [{ name: "河北" }, { name: "湖北", value: 613 }],
    [{ name: "山西" }, { name: "湖北", value: 780 }],
    [{ name: "内蒙古" }, { name: "湖北", value: 241 }],
    [{ name: "辽宁" }, { name: "湖北", value: 1731 }],
    [{ name: "吉林" }, { name: "湖北", value: 694 }],
    [{ name: "黑龙江" }, { name: "湖北", value: 993 }],
    [{ name: "云南" }, { name: "湖北", value: 590 }],
    [{ name: "甘肃" }, { name: "湖北", value: 237 }],
    [{ name: "上海" }, { name: "湖北", value: 992 }],
    [{ name: "重庆" }, { name: "湖北", value: 753 }]
  ];

  var XNData = [
    [{ name: "江苏" }, { name: "湖北", value: 2497 }],
    [{ name: "浙江" }, { name: "湖北", value: 1702 }],
    [{ name: "安徽" }, { name: "湖北", value: 959 }],
    [{ name: "福建" }, { name: "湖北", value: 967 }],
    [{ name: "江西" }, { name: "湖北", value: 828 }],
    [{ name: "广西" }, { name: "湖北", value: 347 }],
    [{ name: "海南" }, { name: "湖北", value: 429 }],
    [{ name: "西藏" }, { name: "湖北", value: 0 }],
    [{ name: "青海" }, { name: "湖北", value: 235 }],
    [{ name: "新疆" }, { name: "湖北", value: 486 }],
    [{ name: "深圳" }, { name: "湖北", value: 77 }]
  ];

  var YCData = [
    [{ name: "山东" }, { name: "湖北", value: 1513 }],
    [{ name: "河南" }, { name: "湖北", value: 732 }],
    [{ name: "湖南" }, { name: "湖北", value: 957 }],
    [{ name: "广东" }, { name: "湖北", value: 1955 }],
    [{ name: "四川" }, { name: "湖北", value: 1205 }],
    [{ name: "贵州" }, { name: "湖北", value: 616 }],
    [{ name: "陕西" }, { name: "湖北", value: 808 }],
    [{ name: "宁夏" }, { name: "湖北", value: 342 }],
    [{ name: "北京" }, { name: "湖北", value: 1061 }],
    [{ name: "天津" }, { name: "湖北", value: 962 }]
  ];

  var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
    	//var planePath = 'arrow';
    	var convertData = function (data) {
    			
    	    var res = [];
    	    for (var i = 0; i < data.length; i++) {
    	    	
    	        var dataItem = data[i];

    	        var fromCoord = geoCoordMap[dataItem[0].name];
    	        var toCoord = geoCoordMap[dataItem[1].name];
    	        if (fromCoord && toCoord) {
    	            res.push({
    	                fromName: dataItem[0].name,
    	                toName: dataItem[1].name,
    	                coords: [fromCoord, toCoord],
    	                value: dataItem[1].value
    	            });
    	        }
    	    }
    	    return res;
    	   	
    	};

    	var color = ['#a6c84c', '#ffa022', '#46bee9'];//航线的颜色
    	var series = [];
    	[['', XAData], ['', XNData], ['', YCData]].forEach(function (item, i) {  
    	    series.push({
    	        name: item[0] + ' Top3',
    	        type: 'lines',
    	        zlevel: 1,
    	        effect: {
    	            show: true,
    	            period: 6,
    	            trailLength: 0.7,
    	            color: 'red',   //arrow箭头的颜色
    	            symbolSize: 3
    	        },
    	        lineStyle: {
    	            normal: {
    	                color: color[i],
    	                width: 0,
    	                curveness: 0.2
    	            }
    	        },
    	        data: convertData(item[1])
    	    },
    	    {
    	        name: item[0] + ' Top3',
    	        type: 'lines',
    	        zlevel: 2,
    	        symbol: ['none', 'arrow'],
    	        symbolSize: 10,
    	        effect: {
    	            show: true,
    	            period: 6,
    	            trailLength: 0,
    	            symbol: planePath,
    	            symbolSize: 15
    	        },
    	        lineStyle: {
    	            normal: {
    	                color: color[i],
    	                width: 1,
    	                opacity: 0.6,
    	                curveness: 0.2
    	            }
    	        },
    	        data: convertData(item[1])
    	    },
    	    {
    	        name: item[0] + ' Top3',
    	        type: 'effectScatter',
    	        coordinateSystem: 'geo',
    	        zlevel: 2,
    	        rippleEffect: {
    	            brushType: 'stroke'
    	        },
    	        label: {
    	            normal: {
    	                show: true,
    	                position: 'right',
    	                formatter: '{b}'
    	            }
    	        },
    	        symbolSize: function (val) {
    	            return 10;
    	        },
    	        itemStyle: {
    	        	normal: {
    	        		color: color[i],
		            },
		            emphasis: {
		                areaColor: '#2B91B7'
		            }
    	        },
    	        data: item[1].map(function (dataItem) {
    	            return {
    	                name: dataItem[1].name,
    	                value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
    	            };
    	        })
    	    });
    	});
    	var option = {
    	    tooltip : {
    	        trigger: 'item', 
    	        formatter:function(params, ticket, callback){
    	            if(params.seriesType=="effectScatter") {
    	                return params.data.name+"加油";
    	            }else if(params.seriesType=="lines"){
    	                return params.data.fromName+" 支援 "+params.data.toName+"<br />"+params.data.value+"人";
    	            }else{
    	                return params.name;
    	            }
    	        } 
          },
    	    geo: {
    	        map: 'china',
    	        label: {
    	            emphasis: {
    	                show: true,
    	                color:'#fff'
    	            }
              },
              zoom: 1.2,
    	        roam: true,
    	        itemStyle: {
    	        	normal: {
		                areaColor: 'rgba(20,41,87,0.6)',
		                borderColor: '#195BB9',
		                borderWidth: 1,
		            },
		            emphasis: {
		                areaColor: '#2B91B7'
		            }
    	        }
    	    },
    	    series: series
    	};
  myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });
})();
